<template>
    <div class="cbox">
        <h4>子路由组件A(子级路由组件)</h4>
        <div>{{ $route.query }}</div>
    </div>
</template>

<script setup>
import { onBeforeMount, onUnmounted } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';

const $route = useRoute()

onBeforeRouteUpdate(function(to,from){
    console.log("路由组件触发缓存，但参数发生变化，初始化操作")
    console.log( "新参数 to.query.arg:",to.query.arg )
    console.log( "旧参数 from.query.arg:",from.query.arg,$route.query.arg )
})

onBeforeMount(function(){
    console.log("GuardPageChildA 组件被创建挂载-初始化操作，参数为："+$route.query.arg)
})
onUnmounted(function(){
    console.log("GuardPageChildA 组件被销毁")
})
</script>

<style lang="sass" scoped>

</style>